<script setup>
import GameCategoryCarouselItem from "@/components/FrontComponents/GameCategoryCarouselItem.vue";
import {gameCommonCarouselGetAPI} from "@/api/FrontApi/game.js";
import {ref, onMounted, watch} from "vue";
import {useRoute} from "vue-router";
import {categoryGetAPI} from "@/api/FrontApi/category.js";

const requestParams = ref({
  length: 6,
  category: ''
})

const carouselData = ref([])

const route = useRoute()
const getCarouselData = async (id = route.params.id) => {
  const res1 = await categoryGetAPI(id)
  requestParams.value.category = res1.data.name
  const res2 = await gameCommonCarouselGetAPI(requestParams.value)
  carouselData.value = res2.data
}

onMounted(() => getCarouselData())

watch(
    () => route.params.id,
    (newValue) => {
      getCarouselData(newValue)
    },
    { immediate: true }
);
</script>

<template>
  <div class="category-carousel">
    <div class="container">
      <el-carousel
          class="carousel"
          trigger="click"
          :interval="5000"
          height="380px">
        <el-carousel-item class="item" v-for="item in carouselData" :key="item">
          <GameCategoryCarouselItem :game="item"></GameCategoryCarouselItem>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style scoped>
.category-carousel {
  margin: 10px 0 0 40px;
  .container {
    .carousel {
      padding: 10px 100px;
      .item {
        overflow: visible;
      }
    }
  }
}
</style>
